<template>
<div class="logmu" v-loading="loading">
  
   <el-form :model="ruleForm" status-icon :rules="rules" ref="loginFormRef"   class="demo-ruleForm">
 <el-form-item label="手机号" prop="phone" class="box">
    <el-input  type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" class="box">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
   
  </el-form-item>
</el-form>
</div>
 
</template>
<script>


export default {
  data(){
    return{
      loading:false,
ruleForm:{
  phone:'18983685304',
  password:"LQ15082528162"
},

   rules:{
        phone:[
          {required:true,message: "请输入手机号", trigger: "blur" }
          
        ],
        password:[
          {required: true, message: "请输入登录密码", trigger: "blur"},
        ]
      }
    }
  },
  methods:{
      // 登录提交数据
      submitForm(){
        this.loading=true;
        this.$refs.loginFormRef.validate((valid)=>{
          if(!valid) return;
          // 否则
         this.$axios.get(
      this.api+"/login/cellphone",  {
        params:{
          phone:this.ruleForm.phone,
          password:this.ruleForm.password
        },
        withCredentials: true 
      }
        
       ).then((res)=>{
         console.log(res);
         if(res.data.code!==200) return this.$message.error("密码错误!");
         else{
           this.loading=false;
           this.$message.success("登录成功！");
          window.sessionStorage.setItem('userinfo',JSON.stringify(res.data.profile));
          window.sessionStorage.setItem('musicCookie',res.data.cookie);
          this.$router.push("/musichome"); 
         }
       
        });
        })
  }
      }

  }

</script>
<style scoped>
.logmu{
  height: 400px;
  width: 400px;
  border: 1px solid rgb(189, 99, 34);
  margin: auto;
  margin-top: 20px;
}
</style>